<template>
  <div class="item" @click="goodsCk(goodsData.type)">
    <img :src="goodsData.image" />
    <div class="item_bottom_box">
      <P class="name ellipsis2">{{goodsData.name}}</P>
      <div class="row_box">
        <div class="tips_box">
          <p
            v-if="l<2"
            :class="ite=='包邮'?'blue':'green'"
            v-for="(ite, l) in goodsData.label"
            :key="l"
          >{{ite}}</p>
        </div>
        <p class="cost_money">￥{{goodsData.price}}</p>
      </div>
      <div class="money_box">
        <p class="money" v-if="type_mode==1||goodsData.type==1">
          ￥
          <span>{{goodsData.sale_price}}</span>
        </p>
        <p class="money integral" v-else>
          <span>{{goodsData.integral_price}}</span>积分
        </p>
        <p class="sales">销量:{{goodsData.sale_num}}</p>
      </div>
    </div>
    <i-toast id="toast" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      bjurl: "",
      type_mode: 0
    };
  },
  props: {
    goodsData: {
      type: Object
    },
    type_mode: {
      type: Number
    }
  },
  methods: {
    goodsCk(type) {
      if (this.type_mode == 1 || type == 1) {
        wx.navigateTo({
          url:
            "../goodsDetail/main?pro_id=" + this.goodsData.pro_id + "&type=" + 1
        });
      } else
        wx.navigateTo({
          url:
            "../goodsDetail/main?intpro_id=" +
            this.goodsData.pro_id +
            "&type=" +
            2
        });
    }
  },
  onLoad(e) {
    Object.assign(this.$data, this.$options.data());
    this.bjurl = this.$bjurl;
  }
};
</script>

<style lang="scss" scoped>
.item {
  width: 333rpx;
  display: flex;
  flex-direction: column;
  margin-top: 20rpx;
  background-color: #ffffff;
  border-radius: 20rpx;
  box-shadow: 0rpx 4rpx 40rpx 0rpx rgba(0, 0, 0, 0.11);
  img {
    width: 333rpx;
    height: 331rpx; //固定高度后期修改
    border-radius: 20rpx 20rpx 0 0;
  }
  .item_bottom_box {
    min-height: 160rpx;
    box-sizing: border-box;
    padding: 10rpx 12rpx 15rpx 20rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .name {
      width: 300rpx;
      color: #4d4d4d;
      font-size: 26rpx;
      line-height: 1.1;
      font-weight: bold;
    }
    .row_box {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      .tips_box {
        display: flex;
        align-items: flex-end;
        font-size: 18rpx;
        p {
          color: #6da9ff;
          padding: 5rpx 14rpx 7rpx;
          background-color: #deebff;
          border-radius: 15rpx;
          margin-right: 10rpx;
        }
        :first-child {
          color: #ffffff;
          background-color: $green;
        }
      }
      .cost_money {
        font-size: 22rpx;
        color: #b3b3b3;
        text-decoration: line-through;
      }
    }
    .money_box {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      .money {
        color: $red;
        line-height: 0.9;
        font-size: 26rpx;
        span {
          font-size: 36rpx;
        }
      }
      .integral {
        font-size: 32rpx;
      }
      .sales {
        font-size: 22rpx;
        color: #7c7c7c;
      }
    }
  }
}
</style>
